<template>

    <div style="height:550px">
        <el-scrollbar>
            <el-card shadow="never" class="border-0">

                <!-- <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
                    <div class="flex items-center justify-end">
                        <el-button v-if="!isEdit" type="primary" @click="allowEdit">编辑</el-button>
                        <el-button v-else type="primary" @click="notAllowEdit">取消编辑</el-button>
                    </div>
                </el-form> -->

                <el-collapse v-model="activeNames">
                    <el-collapse-item title="任务安排流程" name="1">
                        <el-timeline style="max-width: 600px">
                            <el-timeline-item v-for="(activity, index) in taskTimeLines" :key="index"
                                :icon="activity.icon" :type="taskTimeLinesType" :color="taskTimeLinesColor"
                                :hollow="activity.hollow" :timestamp="dateFormatter(activity.time)">
                                {{ activity.message }}
                            </el-timeline-item>
                        </el-timeline>

                    </el-collapse-item>

                    <el-collapse-item title="工程进度" name="2">
                        <el-form label-width="100px" :inline="false">
                            <!-- 出发打卡 -->
                            <el-form-item label="出发打卡: "></el-form-item>
                            <el-row v-if="tableData1.length > 0"
                                v-for="(item, index) in tableData1" :key="index">
                                <el-col :span="10">
                                    <el-form-item label="打卡地址">
                                        <span>{{ item.formattedAddress }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2">
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="打卡时间">
                                        <span>{{ dateFormatter(item.createTime) }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col :span="5">
                                    <el-form-item label="">
                                        暂无数据
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 施工前拍照 -->
                            <el-form-item label="施工前拍照: "></el-form-item>
                            <el-row v-if="orderLogType1.length > 0"
                                v-for="(item1, index1) in orderLogType1" :key="index1">
                                <el-col :span="5">
                                    <el-form-item label="描述:">
                                        <span style="word-break: break-all;">{{ item1.logContent ? item1.logContent : "暂无"
                                            }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="拍照:">
                                        <span v-if="item1.photos">
                                            <span v-for="(item2, index2) in item1.photos.split(',')" :key="index2">
                                                <el-image :z-index="8000"
                                                    style="width: 60px; height: 60px; margin-left: 5px;" :src="item2"
                                                    :preview-src-list="item1.photos.split(',')" preview-teleported />
                                            </span>
                                        </span>
                                        <span v-else>暂无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="操作时间">
                                        <span>{{ dateFormatter(item1.createTime) }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" size="small" text
                                        @click="updateLogCreateTimePre(item1)">修改操作时间</el-button>
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col :span="5">
                                    <el-form-item label="">
                                        暂无数据
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 施工制定计划 -->
                            <el-form-item label="施工制定计划: "></el-form-item>
                            <el-row v-if="orderLogType2.length > 0"
                                v-for="(item1, index1) in orderLogType2" :key="index1">
                                <el-col :span="5">
                                    <el-form-item label="描述:">
                                        <span style="word-break: break-all;">{{ item1.logContent ? item1.logContent : "暂无"
                                            }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="拍照:">
                                        <span v-if="item1.photos">
                                            <span v-for="(item2, index2) in item1.photos.split(',')" :key="index2">
                                                <el-image :z-index="8000"
                                                    style="width: 60px; height: 60px; margin-left: 5px;" :src="item2"
                                                    :preview-src-list="item1.photos.split(',')" preview-teleported />
                                            </span>
                                        </span>
                                        <span v-else>暂无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="操作时间">
                                        <span>{{ dateFormatter(item1.createTime) }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" size="small" text
                                        @click="updateLogCreateTimePre(item1)">修改操作时间</el-button>
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col :span="5">
                                    <el-form-item label="">
                                        暂无数据
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 施工结束拍照 -->
                            <el-form-item label="施工结束拍照: "></el-form-item>
                            <el-row v-if="orderLogType4.length > 0"
                                v-for="(item1, index1) in orderLogType4" :key="index1">
                                <el-col :span="5">
                                    <el-form-item label="描述:">
                                        <span style="word-break: break-all;">{{ item1.logContent ? item1.logContent : "暂无"
                                            }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="拍照:">
                                        <span v-if="item1.photos">
                                            <span v-for="(item2, index2) in item1.photos.split(',')" :key="index2">
                                                <el-image :z-index="8000"
                                                    style="width: 60px; height: 60px; margin-left: 5px;" :src="item2"
                                                    :preview-src-list="item1.photos.split(',')" preview-teleported />
                                            </span>
                                        </span>
                                        <span v-else>暂无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="操作时间">
                                        <span>{{ dateFormatter(item1.createTime) }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" size="small" text
                                        @click="updateLogCreateTimePre(item1)">修改操作时间</el-button>
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col :span="5">
                                    <el-form-item label="">
                                        暂无数据
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-collapse-item>

                    <el-collapse-item title="每日工作记录" name="3">
                        <el-table :data="tableData" stripe style="width: 100%" :row-style="{ height: '60px' }"
                            v-loading="tableDataLoading">
                            <!-- <el-table-column label="日志类型" align="center" width="130">
                                <template #default="{ row }">
                                    {{ formatLogType(row.logType) }}
                                </template>
                            </el-table-column> -->
                            <el-table-column label="日志日期" align="center" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.startTime+' 至 '+row.endTime }}
                                </template>
                            </el-table-column>
                            <el-table-column label="日志内容" align="center" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.logContent ? row.logContent : "-" }}
                                </template>
                            </el-table-column>
                            <el-table-column label="日志图片" align="center" width="300">
                                <template #default="{ row }">
                                    <span v-if="row.photos">
                                        <span v-for="(item, index) in row.photos.split(',')" :key="index">
                                            <el-image :z-index="8000"
                                                style="width: 60px; height: 60px; margin-left: 5px;" :src="item"
                                                :preview-src-list="row.photos.split(',')" preview-teleported />
                                        </span>
                                    </span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作时间" align="center" width="200">
                                <template #default="{ row }">
                                    {{ dateFormatter(row.createTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" align="center" width="250">
                                <template #default="{ row }">
                                    <div>
                                        <el-button v-if="row && row.createTime" type="primary" size="small" text
                                            @click="updateLogCreateTimePre(row)">修改操作时间</el-button>
                                        <el-button type="primary" size="small" text
                                            @click="lookSignInfo(row)">查看打卡信息</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>

                <!-- <div v-if="isEdit" class="flex items-center justify-center">
                    <el-button type="primary" style="margin-top: 10px;" @click="">提交</el-button>
                </div> -->

            </el-card>
        </el-scrollbar>
    </div>

    <!-- <el-dialog v-model="dialogVisible_updateTime" title="修改操作时间" width="500">
        <el-date-picker style="padding-top: 5px;padding-left: 5px;" value-format="YYYY-MM-DDTHH:mm:ss"
            v-model="logUpdateTimeBody.createTime" type="datetime" placeholder="选择时间" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible_updateTime = false">取消</el-button>
                <el-button type="primary" @click="updateLogCreateTime">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog> -->

    <!-- 选取客户dialog -->
    <SystemDialog title="修改操作时间" :visible="dialogVisible_updateTime" :height="10" :width="20" :showOkBtn="true"
        @on-close="dialogVisible_updateTime = false" 
        @on-confirm="updateLogCreateTime">
        <template v-slot:content>
            <el-date-picker style="padding-top: 5px;padding-left: 5px;" value-format="YYYY-MM-DDTHH:mm:ss"
            v-model="logUpdateTimeBody.createTime" type="datetime" placeholder="选择时间" />
        </template>
    </SystemDialog>


    <!-- 打开信息table -->
    <el-dialog v-model="dialogVisible_signInfo" title="查看打卡时间" width="1000">
        <el-table :data="signInfoTableData" stripe :border="true">
            <el-table-column label="打卡人" align="center" width="130">
                <template #default="{ row }">
                    {{ row.clockInPerson }}
                </template>
            </el-table-column>

            <el-table-column label="上班时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.clockInTime) }}
                </template>
            </el-table-column>

            <el-table-column label="打卡位置" align="center" width="200">
                <template #default="{ row }">
                    {{ row.clockInAddress }}
                </template>
            </el-table-column>

            <el-table-column label="下班时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.clockOutTime) }}
                </template>
            </el-table-column>

            <el-table-column label="打卡位置" align="center" width="200">
                <template #default="{ row }">
                    {{ row.clockOutAddress }}
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible_signInfo = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>

import { onMounted, ref, reactive } from "vue";
import SystemDialog from "~/components/SystemDialog.vue";
import { api_orders_log_location, api_orders_log_updateCreateTime, api_orders_getLogByOrderId, api_orders_getOrderAssign } from "~/api/ordersApi";
import { toast, toastWarn } from "~/composables/util";
import { dateFormatter } from "~/utils/common";


const options_logType = [{ value: 1, label: '施工前拍照检查' }, { value: 2, label: '施工计划' }, { value: 3, label: '每日工作日志' }, { value: 4, label: '施工结束拍照' }]

//父子传参，orderDetail：工单详情
const props = defineProps({
    orderDetail: Object
})

//默认打开基础信息折叠
const activeNames = ref(['1'])
//是否编辑
const isEdit = ref(false)
const taskTimeLinesType = ref("success")
const taskTimeLinesColor = ref("#0bbd87")

//任务安排流程 
const taskTimeLines = ref([])
//出发打卡
const tableData1 = ref([])

//工单日志
const tableDataLoading = ref(false)
const searchForm = reactive({
    orderId: null
})
const tableData = ref([])
const dialogVisible_updateTime = ref(false)
const logUpdateTimeBody = reactive({})

//日志类型，1施工前拍照检查，2施工计划，3每日工作日志，4施工结束日志
//施工前拍照检查
const orderLogType1 = ref([])
//施工计划
const orderLogType2 = ref([])
//施工结束拍照
const orderLogType4 = ref([])

//打卡信息弹窗
const dialogVisible_signInfo = ref(false)
const signInfoTableData = ref([])

onMounted(() => {
    //工单ID
    searchForm.orderId = props.orderDetail.orderId
    //工单任务流程
    getOrderAssign()
    //加载出发打卡时间
    getSetOutClockIn()
    //工单日志列表
    getData()
})

const allowEdit = () => {
    isEdit.value = true
}

const notAllowEdit = () => {
    isEdit.value = false
}

// 工单任务流程
const getOrderAssign = () => {
    //查看任务安排流程
    api_orders_getOrderAssign({ orderId: searchForm.orderId }).then(res => {
        //console.log('api_orders_getOrderAssign===>', JSON.stringify(res))
        if (res) {
            // let result = []
            // var keys = Object.keys(res);
            // keys.map(function (key) {
            //     result.push({ content: res[key], timestamp: dateFormatter(key) })
            // });
            taskTimeLines.value = res
        }
    })
}

// 出发打卡信息
const getSetOutClockIn = () => {
    let reqBody = {
        orderId: props.orderDetail.orderId,
        locationType: 4,
    }
    api_orders_log_location(reqBody).then(res => {
        if (res && res.records) {
            tableData1.value = res.records
        } else {
            tableData1.value = []
        }
    })
}

// 查询工单日志
const getData = (e) => {
    if (typeof (e) == 'number') {
        searchForm.page = e
    }
    //每日日志列表
    api_orders_getLogByOrderId({ orderId: searchForm.orderId }).then(res => {
        //console.log('tableData.value ', JSON.stringify(res))
        if (res) {
            //分离出"施工前拍照"、"制定施工计划"、"施工结束拍照"
            orderLogType1.value = res.filter(function (item) {
                return item.logType == 1
            });
            orderLogType2.value = res.filter(function (item) {
                return item.logType == 2
            });
            orderLogType4.value = res.filter(function (item) {
                return item.logType == 4
            });
            //表格只展示每日日志
            tableData.value = res.filter(function (item) {
                return item.logType == 3
            });
        }
    })
}

// 重置按钮
const resetSearchForm = () => {
    searchForm.logType = null
    searchForm.page = 1
    searchForm.size = 5
    searchForm.total = null
}

// 日志类型
const formatLogType = (state) => {
    return options_logType.find(x => x.value == state)?.label || state
}

// 更新操作时间 前置
const updateLogCreateTimePre = (row) => {
    dialogVisible_updateTime.value = true
    logUpdateTimeBody.logId = row.logId
    logUpdateTimeBody.createTime = ''
}

// 查看打卡信息
const lookSignInfo = (row) => {

    //构建打卡table数据
    let dataList = []

    //1、先找出两个集合的engineerId并集
    let engineerIds = new Set();
    if (null != row.dataForClockIn) {
        row.dataForClockIn.forEach(obj => {
            engineerIds.add(obj.engineerId);
        });
    }
    if (null != row.dataForClockOut) {
        row.dataForClockOut.forEach(obj => {
            engineerIds.add(obj.engineerId);
        });
    }
    //console.log("engineerIds--------->",engineerIds,engineerIds.size)
    //2、遍历set构建数据
    if (null != engineerIds && engineerIds.size > 0) {
        engineerIds.forEach((item) => {
            let json = {}
            //上班打卡
            if (null != row.dataForClockIn) {
                const obj = row.dataForClockIn.filter(o => o.engineerId == item);
                if (null != obj && obj.length > 0) {
                    json.clockInPerson = obj[0].engineerName ? obj[0].engineerName : "-"
                    json.clockInTime = obj[0].createTime ? obj[0].createTime : null
                    json.clockInAddress = obj[0].formattedAddress ? obj[0].formattedAddress : "-"
                } else {
                    json.clockInPerson = null
                    json.clockInTime = null
                    json.clockInAddress = "-"
                }
            } else {
                json.clockInPerson = null
                json.clockInTime = null
                json.clockInAddress = "-"
            }
            //下班打卡
            if (null != row.dataForClockOut) {
                const obj = row.dataForClockOut.filter(o => o.engineerId == item);
                if (null != obj && obj.length > 0) {
                    if (json.clockInPerson == null) {
                        json.clockInPerson = obj[0].engineerName ? obj[0].engineerName : "-"
                    }
                    json.clockOutTime = obj[0].createTime ? obj[0].createTime : "-"
                    json.clockOutAddress = obj[0].formattedAddress ? obj[0].formattedAddress : "-"
                } else {
                    json.clockOutTime = null
                    json.clockOutAddress = "-"
                }
            } else {
                json.clockOutTime = null
                json.clockOutAddress = "-"
            }
            dataList.push(json)
        });
    }

    //3、赋值
    signInfoTableData.value = dataList
    //console.log("signInfoTableData===>",JSON.stringify(signInfoTableData.value))
    //4、打开弹窗
    dialogVisible_signInfo.value = true
}


// 更新操作时间
const updateLogCreateTime = () => {
    if (!logUpdateTimeBody?.createTime) {
        toastWarn('选择操作时间')
        return
    }
    console.log('logUpdateTimeBody', logUpdateTimeBody)
    api_orders_log_updateCreateTime(logUpdateTimeBody).then(res => {
        toast("修改操作时间成功")
        dialogVisible_updateTime.value = false
        getData()
    })
}
</script>